<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>欢迎学习 {{ course }}</h2>
        <!-- 键盘事件 
                keyup：按下弹起后 触发
                keydown：按下不用弹起 就触发


            Vue常用按键的别名
                回车 ： enter
                删除 ： delete
                推出 ： esc
                空格 ： space
                换行 ： tab  特殊 本身就有功能把焦点从当前元素移走 适配keydown使用
                上   ： up
                下   ： down
                左   ： left
                右   ： right

            系统修饰键
                ctrl alt shift meta(win键)
         -->
<!-- js内真名 Enter -->
        <input type="text" placeholder="按下回车提示输入" @keyup.Enter="showInfo">
        <!-- Vue内别名 enter -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <!-- 不推荐 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
<!-- CapsLock 类似这种多单词组合的按键名 需要改成小写并用横杠连接 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">


    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        // 自定义别名
        Vue.config.keyCodes.huiche = 13
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    course : 'VUE 2'
                }
            },
            methods: {
                showInfo(event) {
                    // event.key 代表js的真名
                    // event.keyCode 代表案件编码 可以用来判断回车
                    console.log(event.target.value);
                }
            },
        })
    </script>

</body>
</html>